<template>
	<view class="content">
		<u-grid :border="false" col="4">
			<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex">
				<image :src="listItem.url" style="width: 40rpx;" mode="widthFix"></image>
				<text class="grid-text">{{listItem.title}}</text>
			</u-grid-item>
		</u-grid>
	</view>
</template>

<script>
	export default {
		name: "sportIcon",
		data() {
			return {
				list: [{
						title: '篮球',
						url: require("@/static/sport-icon/baskball.png")
					},
					{
						title: '足球',
						url: require("@/static/sport-icon/football.png")
					},{
						title: '排球',
						url: require("@/static/sport-icon/volleyball.png")
					},{
						title: '乒乓球',
						url: require("@/static/sport-icon/ping_pong.png")
					},{
						title: '羽毛球',
						url: require("@/static/sport-icon/badminton.png")
					},{
						title: '网球',
						url: require("@/static/sport-icon/tennis.png")
					},{
						title: '桌球',
						url: require("@/static/sport-icon/snooker.png")
					},{
						title: '电竞',
						url: require("@/static/sport-icon/game.png")
					},
					
				],
			};
		}
	}
</script>

<style lang="scss" scoped>
.content{
	.grid-text{
		font-size: 26rpx;
		color: #909399;
		margin: 10rpx 0 20rpx 0;
	}
}
</style>
